<template>
	<div class="header-container">
		<div class="header-left flex-box">
			<el-icon class="icon" size="20" @click="store.commit('collapseMenu')">
				<Fold />
			</el-icon>
			<ul class="flex-box">
				<li v-for="(item, index) in selectMenu" :key="item.path" :class="{ selected: isSelected(item) }"
					class="tab flex-box">
					<!-- 顶栏标签 -->
					<!-- 图标 -->
					<el-icon size="12">
						<component :is="item.icon" />
					</el-icon>
					<!-- 名字 -->
					<!-- 同时实现点击名字跳转的功能 -->
					<router-link class="text flex-box" :to="{ path: item.path }">
						{{ item.name }}
					</router-link>
					<!-- 关闭按钮 -->
					<el-icon size="12" class="close" @click="closeTab(item, index)">
						<Close />
					</el-icon>
				</li>
			</ul>
		</div>
		<div class="header-right">
			<el-dropdown @command="handleClick">
				<div class="el-dropdown-link flex-box">
					<el-avatar :src="userInfo.avatar" />
					<p class="user-name">
						{{ userInfo.name }}
					</p>
				</div>
				<template #dropdown>
					<el-dropdown-menu>
						<el-dropdown-item command="cancel">退出</el-dropdown-item>

					</el-dropdown-menu>
				</template>
			</el-dropdown>
		</div>
	</div>
</template>

<script setup>
import { computed } from 'vue';
import { useStore } from 'vuex';
import { useRoute, useRouter } from 'vue-router';

// 拿到store的实例
const store = useStore();

const route = useRoute();

const router = useRouter();

const selectMenu = computed(() => store.state.menu.selectMenu);

// 判断是否选中
const isSelected = (item) => route.path === item.path;

const userInfo = JSON.parse(localStorage.getItem('pz_userInfo'));

// 点击关闭tab的逻辑
const closeTab = (item, index) => {
	// 调用closeMenu方法
	store.commit('closeMenu', item);
	// 如果删除的是非当前页
	if (!isSelected(item)) {
		return;
	}
	const selectMenuData = selectMenu.value;
	// 删除最后一项
	if (index === selectMenuData.length) {
		// 如果tag只有一个
		if (!selectMenuData.length) {
			// 跳转到根路径
			router.push('/');
		}
		// 存在多个tag
		else {
			// tag往前进一位
			router.push({
				path: selectMenuData[index - 1].path
			});
		}
	}
	// 如果删除的是中间位置的tag
	else {
		router.push({
			path: selectMenuData[index].path
		});
	}
};

const handleClick = (command) => {
	if (command === 'cancel') {
		localStorage.removeItem('pz_token');
		localStorage.removeItem('pz_userInfo');
		localStorage.removeItem('pz_v3pz');

		window.location.href = window.location.origin
	}
};
</script>

<style scoped>
.flex-box {
    display: flex;
    align-items: center;
    height: 100%;
}
.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    background-color: #fff;
    padding-right: 25px;
    .header-left {
        height: 100%;
        .icon {
            width: 45px;
            height: 100%;
        }
        .icon:hover {
            background-color: #f5f5f5;
            cursor: pointer;
        }
        .tab {
            padding: 0 10px;
            height: 100%;
            .text {
                margin: 0 5px;
            }
            .close {
                visibility: hidden;
            }
            &.selected {
                a {
                    color: #409eff;
                }
                i {
                    color: #409eff;
                }
                background-color: #f5f5f5;
            }
        }
        .tab:hover {
            background-color: #f5f5f5;
            .close {
                visibility: inherit;
                cursor: pointer;
                color: #000;
            }
        }
    }
    .header-right {
        .user-name {
            margin-left: 10px;
        }
    }
    a {
        height: 100%;
        color: #333;
        font-size: 15px;
    }
}
</style>